<template>
  <el-card style="overflow:scroll;height: 100%;overflowX:hidden;">
    <el-row>
      <el-col :span="8">
        <el-form label-width="100px">
          <el-form-item label="运单合同号">
            <WaybillContractLink :value="waybill"
                                 router="wayBillDetail"
                                 :query="waybillQuery"
                                 copyable />
          </el-form-item>
          <el-form-item label="承运方">
            <CarrierNameSelect v-model="carrierId" />
          </el-form-item>
          <el-form-item label="发货方">
            <ShipperSelect v-model="customerId" />
          </el-form-item>
          <el-form-item label="字典">
            <DictionarySelect v-model="dictionaryValue"
                              :group="dictionaryGroup" />
          </el-form-item>
          <el-form-item label-width="0">
            <TransportTags v-model="transportTags" />
          </el-form-item>
          <el-form-item label="附件">
            <Attachments v-model="attachments" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <pre>
          {{formData}}
        </pre>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <p>回单表单</p>
        <ReceiptForm v-model="receipt" />
        <pre>{{receipt}}</pre>
      </el-col>
      <el-col :span="8">
        <p>签收表单</p>
        <SignForm v-model="sign" />
        <pre>{{sign}}</pre>
      </el-col>
      <el-col :span="8">
        <p>备注表单</p>
        <RemarkForm v-model="remark" />
        <pre>备注: {{remark}}</pre>
      </el-col>
      <el-col :span="8">
        <p>打分条</p>
        <ScoreBar v-model="score" />
        <pre>{{score}}</pre>
      </el-col>
      <el-col :span="8">
        <p>设备加载</p>
        <DeviceLoader :deviceCode="deviceCode" />
        <el-input @blur="handleDeviceCodeBlur"
                  v-model="tempDeviceCode" />
        <pre>{{devices}}</pre>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import WaybillContractLink from '@/components/advance/waybill/WaybillContractLink.vue'
import Attachments from '@basic/Attachments.vue'
import ScoreBar from '@basic/ScoreBar.vue'
import RemarkForm from '@/components/basic/RemarkForm.vue'
import SignForm from '@/components/basic/SignForm.vue'
import ReceiptForm from '@/components/basic/ReceiptForm.vue'
import DictionarySelect from '@basic/DictionarySelect.vue'
import CarrierNameSelect from '@/components/basic/CarrierNameSelect.vue'
import CustomerNameSelect from '@/components/basic/CustomerNameSelect.vue'
import TransportTags from '@/components/basic/TransportTags.vue'
import DeviceLoader from '@/components/basic/DeviceLoader.vue'
const WAYBILL = {
  "calculateValue": 601.00,
  "calculateVolume": 75.800000,
  "calculateWeight": 79.2000,
  "carrierContactMobile": "15019496979",
  "carrierContactName": "张莉珍",
  "carrierId": 108270,
  "carrierName": "张莉珍",
  "chargeMode": 1,
  "chargeModeDesc": "重量",
  "combineContractNo": "HD0001",
  "combineId": 1231463,
  "consigneeId": 341434,
  "consigneeName": "京东仓库",
  "contractNo": "LD0203074727",
  "customerId": 98898,
  "customerName": "北京欧诺建筑装饰工程有限公司",
  "delayStatus": 0,
  "delayTime": 0,
  "deliver": 1,
  "deliverDesc": "是",
  "deviceCode": "351608086034845",
  "distanceKm": 1939804,
  "distanceTime": 82733,
  "fromAddress": "昆仑山路79号",
  "fromCity": "宿迁市",
  "fromCityCode": "321300",
  "fromContactMobile": "15012621212",
  "fromContactName": "李安",
  "fromDistrict": "宿豫区",
  "fromDistrictCode": "321311",
  "fromLocation": "118.353868,33.922665",
  "fromLocationType": 0,
  "fromProvince": "江苏省",
  "fromProvinceCode": "320000",
  "fromTime": "2023-02-06 07:47:00",
  "goodsCategory": 1,
  "goodsCategoryDesc": "普通货物",
  "id": 11668,
  "insure": 1,
  "insureDesc": "是",
  "offLoad": 1,
  "offLoadDesc": "是",
  "onLoad": 0,
  "onLoadDesc": "否",
  "orderId": 63,
  "orderNo": "I974731272192",
  "packageMode": 1,
  "packageModeDesc": "散箱",
  "pick": 1,
  "pickDesc": "是",
  "pricingUnit": 1,
  "pricingUnitDesc": "公斤",
  "receiptLoseStatus": 0,
  "receiptLoseStatusDesc": "否",
  "shipMode": 2,
  "shipModeDesc": "长途",
  "status": 30,
  "statusDesc": "待签收",
  "tenantId": 60,
  "toAddress": "伏龙路一段149号",
  "toCity": "成都市",
  "toCityCode": "510100",
  "toContactMobile": "15012326632",
  "toContactName": "收货联系人001",
  "toDistrict": "双流区",
  "toDistrictCode": "510116",
  "toLocation": "104.070435,30.526212",
  "toLocationType": 0,
  "toLocationTypeDesc": "大概坐标",
  "toProvince": "四川省",
  "toProvinceCode": "510000",
  "toTime": "2023-02-26 07:47:00",
  "totalQuantity": 15,
  "totalValue": 601.00,
  "totalVolume": 73.000000,
  "totalWeight": 75.0000,
  "trackInfo": "剩余1939.8千米,30.7小时,预计提前到达",
  "trackType": 1,
  "trackTypeDesc": "电子回单",
  "transferType": 20,
  "transportMode": 1,
  "transportModeDesc": "零担",
  "transportStatus": 1,
  "transportStatusDesc": "提货中",
  "valueAddition": 75.0000,
  "volumeAddition": 2.800000,
  "combine": 1,
  "waybillType": 20,
  "weightAddition": 4.2000
}
export default {
  name: "BasicComponentsTests",
  components: {
    WaybillContractLink,
    RemarkForm,
    ReceiptForm,
    SignForm,
    ScoreBar,
    Attachments,
    CarrierNameSelect,
    CustomerNameSelect,
    DictionarySelect,
    TransportTags,
    DeviceLoader,
  },
  props: {

  },
  data () {
    return {
      tempDeviceCode: null,
      deviceCode: "351608085022593",
      waybill: WAYBILL,
      receipt: {},
      sign: {},
      remark: null,
      score: 5,
      attachments: [{
        name: '1111',
        url: "http://wlyuan-pdf.oss-cn-shanghai.aliyuncs.com/202302010954330e80e788-.png",
        type: 2
      }, {
        name: '1111',
        url: "http://wlyuan-pdf.oss-cn-shanghai.aliyuncs.com/202302010954330e80e788-.png",
        type: 2
      }],
      carrierId: null,
      customerId: null,
      dictionaryGroup: 'ACTION',
      dictionaryValue: null,
      transportTags: [{
        label: "提"
      }, {
        label: "送"
      }, {
        label: "装"
      }, {
        label: "卸"
      },]
    }
  },
  computed: {
    ...mapState({
      devices: state => state.device.devices
    }),
    waybillQuery () {
      return {
        "id": this.waybill.id,
        "status": this.waybill.status
      }
    },
    formData () {
      return {
        attachments: this.attachments,
        carrierId: this.carrierId,
        customerId: this.customerId,
        dictionaryGroup: this.dictionaryGroup,
        dictionaryValue: this.dictionaryValue,
      }
    }
  },
  methods: {
    handleDeviceCodeBlur () {
      this.deviceCode = this.tempDeviceCode;
    }
  }
}
</script>